<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <meta charset="utf-8">
    <title>地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <link rel="stylesheet" href="/mac/plugins/layui-v2.6.5/layui/css/layui.css">
    <link rel="stylesheet" href="/mac/plugins/bootstrap/css/bootstrap.min.css">
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Nob59Czr3B63ppRCe3BVAW6n2mU3i5mr"></script>
</head>
<body>
<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/4/19
  Time: 10:13 上午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">💻商城</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <c:if test="${user!=null}">
                            <li><a href="#">${user.username}</a></li>
                        </c:if>
                        <li class="active"><a href="/mac/product/index">首页</a></li>
                        <li><a id="login_a" href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                        <li><a href="/mac/login/carts/index"><span class="glyphicon glyphicon-shopping-cart"></span>我的购物车</a></li>
                        <li><a href="/mac/map/ditu.jsp"><span class="glyphicon glyphicon-shopping-cart"></span>地图</a></li>
                        <li><a href="/mac/login/orders/index">我的订单</a></li>
                        <li><a href="/mac/user/exit">安全退出</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">用户登录入口</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" method="post">
                    <div class="form-group has-feedback">
                        <label class="col-md-2 control-label">用户名</label>
                        <div class="col-md-8">
                            <input name="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
                            <span class="glyphicon glyphicon-user form-control-feedback"></span>
                        </div>
                        <label id="uu" style="display: none" class="text-danger">用户不存在</label>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-md-8">
                            <input name="password" type="text" class="form-control" id="password" placeholder="请输入密码">
                            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                        </div>
                        <label id="pp" style="display: none" class="text-danger">密码错误</label>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">请记住我
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" onclick="login()" class="btn btn-default">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>
    function login(){
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //通过ajax发送请求到后端 - 局部刷新
        //ajax请求的后台不能有任何跳转的语句 - 后台仅仅会返回json数据.
        //ajax - 纯js写法
        //jquery语法

        //发送到后台的数据使用json对象 {"key":"value","key":"value"}
        let send_data = {"username":username,"password":password}
        $.post('/mac/user/login',send_data,function(data){
            //此处的data代表的是后台返回过来的Json字符串->json对象
            //json对象.key -> value
            let uu = document.getElementById("uu");
            let pp = document.getElementById("pp");
            uu.style.display="none";
            pp.style.display="none";
            console.log(data.code);
            if(data.code=="200"){
                window.location='/mac/product/index';
            }else if(data.code=="404"){
                uu.style.display="";

            }else if(data.code=="500"){
                pp.style.display="";
            }
        })
    }
</script>

<div id="container"></div>
</body>
</html>
<script>
    var map = new BMapGL.Map('container');
    var point = new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    // 创建标记图标
    var myIcon = new BMapGL.Icon("images/icon.png", new BMapGL.Size(52, 32));
    // 创建Marker标注，使用新建的标记图标
    var pt = new BMapGL.Point(116.417, 39.909);
    var marker = new BMapGL.Marker(pt, {
        icon: myIcon
    });


    // 将标注添加到地图
    map.addOverlay(marker);

    var locationControl = new BMapGL.LocationControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(20, 20)
    });
    // 将控件添加到地图上
    map.addControl(locationControl);
    // 创建城市选择控件
    var cityControl = new BMapGL.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 5)
    });
    // 将控件添加到地图上
    map.addControl(cityControl);



    // 创建图文信息窗口
    var sContent = "<h4 style='margin:0 0 5px 0;'>天安门</h4>"

    var infoWindow = new BMapGL.InfoWindow(sContent);
    // marker添加点击事件
    marker.addEventListener('click', function () {
        this.openInfoWindow(infoWindow);
        // 图片加载完毕重绘infoWindow
        document.getElementById('imgDemo').onload = function () {
            infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
        };
    });

    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加比例尺控件
    map.addControl(zoomCtrl);


    //导航
    map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
    //p1为起点,p2为终点
    // var p1 = new BMapGL.Point(120.5860881588029,31.326729131202804);
    // var p2 = new BMapGL.Point(118.34380269644235,29.71960862387751);

    var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
    driving.search(p1, p2);
</script>
<script src="/mac/plugins/jquery/jquery.min.js"></script>
<script src="/mac/plugins/bootstrap/js/bootstrap.min.js"></script>